<template>
	<view class="allmcBox">
		<view class="topbox">
			<view class="tjrq">
				<view class="daterange">
					<text class="lb">统计日期：</text>
					<view class="rqbox">
						<text class="rq">{{range[0]}}</text>
						<text> - </text>
						<text class="rq">{{range[1]}}</text>
					</view>
				</view>
				<text class="scbtn" @click="showDrawer">筛选</text>
			</view>
			<view class="searchbox" v-if="show">
				<view class="item">
					<text class="label">统计时间</text>
					<view class="con time">
						<uni-datetime-picker class="mydpdate" @change="changeDateTime" ref="daterange" v-model="range" type="daterange"
							:border="false" rangeSeparator="-">
						</uni-datetime-picker>
					</view>
				</view>
				<view class="item">
					<text class="label">商户编号</text>
					<view class="con">
						<input class="shinput" placeholder="商户名称编号" />
					</view>
				</view>
				<view class="btnBox">
					<view class="btn">重置</view>
					<view class="btn btn2">查询</view>
				</view>
			</view>
		</view>
		<view class="listBox">
			dfdfdfdfd
		</view>
	</view>
</template>

<script>
	import tool from "@/common/tool.js"
	export default {
		data() {
			return {
				range: ["2021-03-8", "2021-4-20"],
				show:true
			}
		},
		onLoad() {
			let date = new Date();
			this.range[0] = tool.dateFormat('Y-m-d', date.getTime() - (86400 * 90) * 1000)
			this.range[1] = tool.dateFormat('Y-m-d', date.getTime())
		},
		methods: {
			changeDateTime(e) {
				this.range[0] = e[0]
				this.range[1] = e[1]
				//this.refData();
			},
			showDrawer() {
				this.show = !this.show;
			},
			closeDrawer() {
				this.$refs.showRight.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.allmcBox{
		padding: 100rpx 0 0 0;
		.topbox{
			position: fixed;
			z-index: 10;
			width: 100%;
			left: 0;
			top: var(--window-top);
			height: 100rpx;
		}
		.tjrq {
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			height: 100%;
			padding: 0 20rpx;
			.daterange {
				flex: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				.lb{}
				.rqbox{
					display: flex;
					flex: 1;
					//border: 1px solid #eee;
					//background: #fff;
					height: 60rpx;
					align-items: center;
				}
			}
			.scbtn{
				width: 80rpx;
				font-size: 30rpx;
				color: #238de8;
				text-align: right;
			}
		}
		.searchbox{
			position: absolute;
			box-sizing: border-box;
			z-index: 10;
			left: 0;
			top: 100rpx;
			width: 100%;
			background: #fff;
			box-shadow: 0 0 10rpx #eee;
			padding:40rpx 20rpx;
			font-size: 28rpx;
			.item{
				display: flex;
				height: 80rpx;
				margin: 0 0 30rpx 0;
				.label{
					width: 140rpx;
					line-height: 80rpx;
				}
				.con{
					box-sizing: border-box;
					flex: 1;
					border: 1px solid #eee;
					&.time{
						box-sizing: border-box;
						position: relative;
						z-index: 11;
						background: #fff;
						line-height: 80rpx;
						overflow: hidden;
						.rq{
							float: left;
						}
						.fg{
							float: left;
							padding: 0 30rpx;
						}
						.mydpdate{
							position: absolute;
							z-index: 11;
							left: 0;
							top: 0;
							width: 100%;
							height:100%;
							opacity: 1;
						}
					}
					.shinput{
						display: block;
						width: 100%;
						height: 100%;
						border: 0;
						padding: 0 20rpx;
						font-size: 28rpx;
					}
				}
			}
			.btnBox{
				display: flex;
				height: 80rpx;
				padding: 0 0 0 140rpx;
				.btn{
					flex: 1;
					border: 1px solid #eee;
					border-radius:20rpx ;
					text-align: center;
					line-height: 80rpx;
					&+.btn{
						margin-left: 30rpx;
					}
					&.btn2{
						background:#238de8;
						color: #fff;
					}
				}
			}
		}
	}
	.dwbox{
		display: flex;
		flex-flow: column;
		width: 100%;
		height: 100%;
		overflow: hidden;
		.dwMain{
			flex: 1;
		}
		.btnbox{
			height: 90rpx;
			background: #fff;
		}
	}
	
	// #ifdef H5
		
	// #endif
</style>
